<template>
  <div class="answer">
    <TitleBox></TitleBox>
    <SearchBox ></SearchBox>
    <JieDaNav></JieDaNav>
    <div class="answer-main">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="article_scroller" :noDataText="noDataText">
        <JieDaMain :checkAllState = false :initState = navIndex :postJiedaLists = jieDaData></JieDaMain>
      </scroller>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import '../assets/js/iconfont-wenzheng'
import JieDaNav from '../components/IndexJieDaNav.vue'
import SearchBox from '../components/SearchBox.vue'
import TitleBox from '../components/TitleBox.vue'
import JieDaMain from '../components/IndexJieDaMain.vue'
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name: 'home',
  data() {
    return {
      navIndex: 0,
      stateI: 0,
      dataLength: '',
      noDataText: '没有更多了',
      jieDaData: {
        jieDaLists: '',
        checkAllShow: false,
        loadingShow: true,
        noDataShow: false
      }
    }
  },
  components: {
    JieDaNav,
    JieDaMain,
    SearchBox,
    TitleBox
  },
  computed: {},
  methods: {
    getJiaDa(page, end) {
      this.$axios
        .get('./data/shanwen-data/jieda-a0' + page + '.json')
        .then(res => {
          // console.log(res.data.resule)
          this.jieDaData.jieDaLists = res.data.result.slice(0, end)
          this.dataLength = res.data.result.length
          this.jieDaData.loadingShow = false
          if (!res.data.result.length) {
            this.jieDaData.noDataShow = true
            this.noDataText = ''
          } else {
            this.jieDaData.noDataShow = false
            this.noDataText = '没有更多了'
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    refresh() {
      console.log('refresh')
      this.timeout = setTimeout(() => {
        this.$refs.article_scroller.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.timeout = setTimeout(() => {
        this.stateI++
        this.getJiaDa(this.navIndex + 1, 4 * this.stateI)
        if (4 * this.stateI > this.dataLength) {
          this.$refs.article_scroller.finishInfinite(true)
        } else {
          this.$refs.article_scroller.finishInfinite(false)
        }
      }, 1000)
    }
  },
  created() {
    this.$bus.$on('jieDaNavIndex', data => {
      this.jieDaData.loadingShow = true
      this.jieDaData.noDataShow = false
      this.jieDaData.jieDaLists = ''
      this.navIndex = data
      this.noDataText = ''
      setTimeout(() => {
        this.getJiaDa(data + 1, 4)
      }, 500)
    })
    // this.$bus.$on('setNavIndex', data => {
    //   // console.log(data)
    //   this.navIndex = data
    //   this.getJiaDa(data + 1, 4)
    // })
  },
  mounted() {
    // console.log('8989')
    // this.getJiaDa(1, 4)
  }
}
</script>
<style lang="scss" scoped>
.answer {
  width: 100%;
  height: 100vh;
  text-align: left;
  .answer-main {
    width: 100%;
    overflow: hidden;
    height: calc(100% - 98px);
    position: relative;
  }
}
</style>
